<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>电子音乐</title>  
    <style>  

        /*============背景============*/
        html, body {  
            height: 100%;  
            margin: 0;  
            padding: 0;  
        }  
  
        body {  
            background: linear-gradient(to bottom right, #4389a2, #83b0d7,#5c258d);  
            background-size: 400% 400%;  
            animation: gradient 15s ease infinite;  
        }  
  
        @keyframes gradient {  
            0% {  
                background-position: 0% 0%;  
            }  
            50% {  
                background-position: 100% 100%;  
            }  
            100% {  
                background-position: 0% 0%;  
            }  
        }  
        /*============背景============*/
  
        /*=============导航栏=============*/  
        .div1 {  
            width: 20px;  
            height: 100vh; 
            background-color: rgb(67, 67, 67);  
            overflow: hidden;  
            box-shadow: 5px 1px 8px rgba(69, 69, 69, 0.771);  
            position: relative;  
            transition: width 1s ease;  
        }  
  
        .div1:hover {  
            width: 150px;  
        }  
  
        ul {  
            list-style-type: none;  
            padding: 0;  
            margin: 0;  
            padding-bottom: 50px;  
        }  
  
        
        li a {  
            display: block;  
            text-decoration: none;  
            color: rgb(245, 245, 220);  
            text-align: center;  
            padding: 25px;
            padding-top: 40px;  
            transition: font-size 0.8s ease;  
        }  
  
        li a:hover {  
            background-color: rgb(0, 0, 0);  
            box-shadow: 3px 3px 3px;  
            font-size: 22px;  
        }  
  
        .arrow {  
            color: antiquewhite;  
            position: absolute;  
            bottom: 20px;  
            left: 50%;  
            transform: translateX(-50%);  
            pointer-events: none;  
        }  

        button {
            color: rgb(162, 153, 141);
            width: 20%;
            padding: 0.1%;
            margin-left: 19%;
            border: 3px solid rgb(46, 46, 46);
            border-radius: 5em;
            font-size: x-large;
            background-color: rgba(29, 29, 29, 0.407);
        }
        
        button:hover {
            color: antiquewhite;
            box-shadow:3px 3px 3px  #646aba;
        }

        /*=============导航栏=============*/  

        /*=============内容栏=============*/

        .flex-container {
            display: flex;
            width: 91%;
            height: 100%;
            left: 5%;
            background-color: rgba(240, 248, 255, 0.23);
            position: absolute;
            flex-wrap: wrap;
        }

        .flex-item1 {
            width: 26%;
            height: 29%;
            margin: 1%;
            padding: 0.8%;
            border-radius: 5%;
            background-color: rgba(250, 235, 215, 0.266);
        }

        .flex-item2 {
            width: 65%;
            height: 5%;
            margin: 1%;
            padding: 0.8%;
            border-radius: 5em;
            background-color: rgba(29, 29, 29, 0.558);
        }

        .flex-item3 {
            width: 26%;
            height: 58%;
            margin: 1%;
            padding: 0.8%;
            border-radius: 5%;
            background-color: rgba(250, 235, 215, 0.005);
        }

        .content-box {
            position: absolute;
            left: 29.6%;
            top: 11%;
            width: 61.6%;
            height: 76.5%;
            margin: 1%;
            padding: 3%;
            border-radius: 5%;
            overflow: auto;
            background-color: rgba(250, 235, 215, 0.558);
        }

        .content-box p {  
            text-indent: 2em;  
            font-size: large;
        }

        .option1 {
            display: flex;
            width: 320px;
            height: 60px;
            margin: 5px;
            margin-bottom: 25px;
            border-radius: 2em;
            border-bottom: 4px solid #515151;
            background-color: white;
            text-align: center;
        }

        .option2 {
            width: 320px;
            height: 60px;
            margin: 5px;
            margin-bottom: 25px;
            margin-left: 40px;
            border-radius: 2em;
            border-bottom: 4px solid #515151;
            background-color: white;
        }

        .option3 {
            width: 320px;
            height: 60px;
            margin: 5px;
            margin-bottom: 25px;
            border-radius: 2em;
            border-bottom: 4px solid #515151;
            background-color: white;
        }

        .option4 {
            width: 320px;
            height: 60px;
            margin: 5px;
            margin-bottom: 25px;
            margin-left: 40px;
            border-radius: 2em;
            border-bottom: 4px solid #515151;
            background-color: white;
        }

        .option5 {
            width: 320px;
            height: 60px;
            margin: 5px;
            border-radius: 2em;
            border-bottom: 4px solid #515151;
            background-color: white;
        }

        .option1,  
        .option2,  
        .option3,  
        .option4,  
        .option5 {  
            transition: transform 0.3s ease;  
        } 

        .option1:hover,
        .option3:hover,
        .option5:hover {
            transform: rotate(-5deg) scale(1.2);
        }

        .option2:hover,
        .option4:hover {
            transform: rotate(7deg) scale(1.2);
        }

        img {
            width: 310px;
            height: 54px;   
            padding-top: 3px;
            padding-left: 4px;
            text-align: center;
            border-radius: 5em;
        }
        
        .word {
            position: absolute;
            top: -1%;
            left: -1%;
            width: 400px;
            height: 300px;
        }
        /*=============内容栏=============*/

        /*------------ 浮 动 -------------*/ 

        @media screen and (max-width:600px) {
            html {
                overflow: auto;
            }

            .word {
                width: 100%;
                top: -40%;
            }

            .flex-item2 {
                width: 91%;
            }

            .flex-container {
                width: 100%;
            }

            .flex-item1 {
                position: absolute;
                top:7%;
                width: 28%;
                height: 22%;
                
            }

            .flex-item3 {
                position:absolute;
                top: -14.5%;
                left: 31%;
                transform: rotate(90deg);
            }

            .content-box {
                position: absolute;
                top: 31%;
                left: 0.5%;
                width: 86%;
                height: 60%;
            }

            .option1,
            .option2,
            .option3,
            .option4,
            .option5 {
                width: 100%;
                height: 6%;
            }

            img {
                width: 90%;
                height: 70%;
            }
        }

        /*------------ 浮 动 -------------*/ 
    </style> 
</head>  
<body>  
    <div class="flex-container">
        <div class="flex-item1"><img class="word" src="./图片/Syn/Synthwave word.png"></div>
        <div class="flex-item2">
            <button onclick="showContent('content1')">初期</button>  
            <button onclick="showContent('content2')">发展</button>
        </div>

        <div class="flex-item3">
            <div class="option1"><a href="https://www.kugou.com/mixsong/2dg8xo54.html?fromsearch=HOME%20-%20Resonance"><img src="./图片/Syn/Syn1.png"></a></div>
            <div class="option2"><a href="https://www.kugou.com/mixsong/9ccwpla2.html?fromsearch=Narvent%20-%20Fainted#7wto4n0c"><img src="./图片/Syn/Syn2.png"></a></div>
            <div class="option3"><a href="https://www.kugou.com/mixsong/9ccwpla2.html?fromsearch=Narvent%20-%20Fainted#2asyx648"><img src="./图片/Syn/Syn3.png"></a></div>
            <div class="option4"><a href="https://www.kugou.com/song/#2qxmsn33"><img src="./图片/Syn/Syn4.png"></a></div>
            <div class="option5"><a href="https://www.kugou.com/mixsong/931o8l46.html?fromsearch=Moonlit#9325lk66"><img src="./图片/Syn/Syn5.png"></a></div>
        </div>

        <div class="content-box" id="contentBox">
        </div>
    </div>

    <div class="div1">  
        <ul>  
            <li><a href="./Dubstep.html">Dubstep</a></li>  
            <li><a href="./Trance.html">Trance</a></li>  
            <li><a href="./Synwave.html">Synthwave</a></li>  
            <li><a href="./Hardcore.html">Hardcore</a></li>  
        </ul>  
        <p class="arrow">⇲</p>   
    </div>  
    
    <script>  
        var content1 = '<p>Synthwave（合成浪潮）的起源可以追溯到2000年代中期，它深受20世纪80年代电影、电子游戏和漫画的启发。这种音乐风格的形成是对那个被称为“黄金年代”的八十年代的怀旧与复兴，以及对当时流行文化的重新诠释。</p><p>Synthwave的初期发展主要受到几位法国艺术家的推动，包括David Grellier (College)，Kavinsky和Justice等人，他们被认为是早期合成浪潮音乐的先驱。这些艺术家开始创作受到John Carpenter（如《怪形》）、Vangelis（如《银翼杀手》）和Tangerine Dream等作曲家影响的音乐作品，这些作品主要与French house音乐风格相关。</p><p>Synthwave的音乐特点主要包括浓厚的合成器声音、强烈的节奏和对复古科幻、电子游戏以及80年代电影的致敬。它大量运用模拟合成器、电子鼓声和强烈的电子声效，以模拟80年代电影和视频游戏的声音。这种音乐风格在近年来经历了复兴，许多艺术家通过创作新的合成器音乐来表达对过去的怀旧情感。</p><p>此外，Synthwave的视觉风格也与80年代的霓虹灯风格和复古科幻艺术紧密相关。这种风格在专辑封面、音乐视频和演出视觉效果中得到了广泛的体现，为Synthwave音乐增添了独特的视觉魅力。</p>';  
        var content2 = '<p>Synthwave的早期阶段可以追溯到2000年代中期，当时一些艺术家开始创作受80年代流行文化启发的音乐作品。这些作品混合了80年代的合成器音色、新浪潮、渐进式音乐和太空歌剧等元素，形成了独特的音乐风格。法国艺术家如David Grellier (College)、Kavinsky和Justice等人被认为是早期合成浪潮音乐的先驱。</p><p>Synthwave发展的转折点发生在2011年，随着电影《Drive》的上映。这部电影大量采用了Synthwave风格的配乐，让更多人了解并喜爱上了这种音乐风格。电影中的配乐由音乐家Cliff Martinez创作，其独特的音乐风格与电影的情节和氛围相得益彰，为观众带来了独特的视听体验。</p><p>自2011年以来，Synthwave经历了复兴并逐渐流行起来。越来越多的艺术家开始创作Synthwave风格的音乐作品，并发布了大量优秀的专辑和单曲。这些作品不仅受到了乐迷的喜爱，还逐渐渗透到电影、游戏和时尚等多个领域。</p><p>Synthwave的音乐特点主要包括浓厚的合成器声音、强烈的节奏和对复古科幻、电子游戏以及80年代电影的致敬。它融合了80年代的合成器音乐、新浪潮、渐进式音乐和太空歌剧等多种元素，形成了一种独特的音乐风格。在视觉方面，Synthwave也与80年代的霓虹灯风格和复古科幻艺术相联系，这反映在专辑封面、音乐视频和演出视觉效果中。</p>';   
      
        window.onload = function() {  
          showContent('content1');   
        };  
      
        function showContent(contentId) {  
          var contentBox = document.getElementById('contentBox');  
          switch (contentId) {  
            case 'content1':  
              contentBox.innerHTML = content1;  
              break;  
            case 'content2':  
              contentBox.innerHTML = content2;  
              break;  
          }  
        }  
      </script> 
</body>  
</html>